$(function () {
    let layer = layui.layer
    let form = layui.form
    // 初始化，后面要多次使用封装函数
    initArtCateList()
    function initArtCateList() {
        axios({
            url: '/my/article/cates'
        }).then(res => {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            //渲染页面数据
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(

                    `
                    
                    <tr>
                    <td>${ele.Id}</td>
                    <td>${ele.name}</td>
                    <td>${ele.alias}</td>
                    <td>

                        <button data-id="${ele.Id}" type="button" class="btn-edit layui-btn layui-btn-xs">编辑</button>
                        <button data-id="${ele.Id}" type="button" class="del-edit   layui-btn layui-btn-xs layui-btn-danger">删除</button>

                    </td>
                    </tr>

                    `
                )
            });
            $('tbody').empty().html(arr.join(''))
        })
    }
    var indexAdd = 0
    //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。       
    // 添加类别
    $('#addBtn').on('click', function () {
        indexAdd = layer.open({
            type: 1,
            title: '添加文章类别',
            area: ['500px', '260px'],
            content: `
            
            
            <form id="addForm" class="layui-form" >
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <!-- 按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button  class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                    <button type="reset" class=" layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
    
    
        </form>
    
            
            `
        });
    })
    // 点击确认提交发起请求
    $('body').on('submit', '#addForm', function (e) {
        e.preventDefault();
        axios({
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize()
        }).then(
            res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }
                layer.msg('恭喜您，添加文章类别成功！')
                initArtCateList()
                // 关闭弹出层
                layer.close(indexAdd)
            }
        )
    })
    let indexEdit = 0 //后面关闭弹出层
    // 点击编辑按钮弹出框和赋值 事件委托
    $('body').on('click', '.btn-edit', function () {
        indexEdit = layer.open({
            type: 1,
            title: '修改文章类别',
            area: ['500px', '260px'],
            content: `
            <form id="editForm" class="layui-form" lay-filter="editForm">
            <!-- 添加隐藏域Id 后面初始化用 $(this).serialize()方便 -->
            <input type="hidden" name="Id">
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <!-- 按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
    
    
        </form>
    
            
            `
        });
        //获取点击的id 自定义属性 赋值
        let id = $(this).attr('data-id')
        // 发送请求
        axios({
            url: '/my/article/cates/' + id
        }).then(
            res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }
                form.val('editForm', res.data.data)
            })

    })

    // 发送请求添加列表并重新加载
    $('body').on('submit', '#editForm', function (e) {
        e.preventDefault()
        axios({
            method: 'POST',
            url: '/my/article/updatecate',
            data: $(this).serialize()
        }).then(
            res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }
                layer.msg('恭喜您，修改文章类别成功！')
                initArtCateList()
                // 关闭弹出层
                layer.close(indexEdit)
            })
    })
    // 删除
    $('tbody').on('click', '.del-edit', function () {
        // 点击按钮后首先获取当前的id
        let id = $(this).attr('data-id')
        layer.confirm('确定要删除吗？', { icon: 3, title: '提示' }, function (index) {
            //do something
            // 发送请求
            axios({
                url: '/my/article/deletecate/' + id
            }).then(
                res => {
                    if (res.data.status !== 0) {
                        return layer.msg(res.data.message)
                    }
                    layer.msg('恭喜您，删除成功！')
                    // 重新获取列表数据
                    initArtCateList()
                })
            layer.close(index);
        });
    })
})